<!-- 后台管理系统的首页（默认页面） -->
<template>
  <div>系统首页：一般会有echarts图表（柱状图，折线图，饼形图等）的方式显示数据的统计结果</div>
  <div class="content-box">

    <div id="main-01">

    </div>
    <div id="main-02">

    </div>
    <div id="main-03">

    </div>
  </div>

</template>

<script setup lang="ts">
import { onMounted } from '@vue/runtime-core';
import * as echarts from 'echarts';
import { getTotalApi, getKApi } from "@/api/total";
import type { AxiosResponse } from 'axios';

onMounted(() => {
  draw01();
  draw02();
  draw03();
})

// 绘制图1
function draw01() {

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main-01') as HTMLElement);

  getTotalApi()
    .then((res: AxiosResponse) => {
      if (res.data.code === "200") {

        let xAxis: Array<string> = [];
        let data: Array<number> = [];

        //把后端响应回来的数据，进行处理（处理成echarts可以使用的数据结构）
        res.data.data.forEach((item: any) => {
          xAxis.push(item.x);
          data.push(item.val);
        });

        // 绘制图表
        myChart.setOption({
          title: {
            text: '销售收据'
          },
          trigger: "axis",
          tooltip: {
            show: true,
            alwaysShowContent: true,
            formatter: '{b}：{a}: {c}'
          },
          xAxis: {
            data: xAxis
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data
            },
            {
              name: '销售额',
              type: 'line',
              data: [100, 200, 300, 120, 20, 30, 100]
            }
          ]
        });
      }
    })
}

// 绘制图2(饼形图)
function draw02() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main-02') as HTMLElement);

  getTotalApi()
    .then((res: AxiosResponse) => {
      if (res.data.code === "200") {
        let data: Array<any> = [];

        res.data.data.forEach((item: any) => {
          data.push({
            value: item.val,
            name: item.x
          });
        })

        // 绘制图表
        myChart.setOption({
          title: {
            text: '销量',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}:{d}%'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '销量',
              type: 'pie',
              radius: '50%',
              data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]

        })
      }
    })
}


// 绘制图3 
function draw03() {
  var myChart = echarts.init(document.getElementById('main-03') as HTMLElement);

  const upColor = '#ec0000';
  const upBorderColor = '#8A0000';
  const downColor = '#00da3c';
  const downBorderColor = '#008F28';

  // 定义echarts图表的配置项。
  let options = {
    title: {
      text: '上证指数',
      left: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      // data: data0.categoryData,
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: 'dataMin',
      max: 'dataMax'
    },
    yAxis: {
      scale: true,
      splitArea: {
        show: true
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 50,
        end: 100
      },
      {
        show: true,
        type: 'slider',
        top: '90%',
        start: 50,
        end: 100
      }
    ],
    series: [
      {
        name: '日K',
        type: 'candlestick',
        // data: data0.values,
        itemStyle: {
          color: upColor,
          color0: downColor,
          borderColor: upBorderColor,
          borderColor0: downBorderColor
        },
        markPoint: {
          label: {
            formatter: function (param: any) {
              return param != null ? Math.round(param.value) + '' : '';
            }
          },
          data: [
            {
              name: 'Mark',
              coord: ['2013/5/31', 2300],
              value: 2300,
              itemStyle: {
                color: 'rgb(41,60,85)'
              }
            },
            {
              name: 'highest value',
              type: 'max',
              valueDim: 'highest'
            },
            {
              name: 'lowest value',
              type: 'min',
              valueDim: 'lowest'
            },
            {
              name: 'average value on close',
              type: 'average',
              valueDim: 'close'
            }
          ],
          tooltip: {
            formatter: function (param: any) {
              return param.name + '<br>' + (param.data.coord || '');
            }
          }
        },
        markLine: {
          symbol: ['none', 'none'],
          data: [
            [
              {
                name: 'from lowest to highest',
                type: 'min',
                valueDim: 'lowest',
                symbol: 'circle',
                symbolSize: 10,
                label: {
                  show: false
                },
                emphasis: {
                  label: {
                    show: false
                  }
                }
              },
              {
                type: 'max',
                valueDim: 'highest',
                symbol: 'circle',
                symbolSize: 10,
                label: {
                  show: false
                },
                emphasis: {
                  label: {
                    show: false
                  }
                }
              }
            ],
            {
              name: 'min line on close',
              type: 'min',
              valueDim: 'close'
            },
            {
              name: 'max line on close',
              type: 'max',
              valueDim: 'close'
            }
          ]
        }
      }
    ]
  }

  // 发送请求，把后端响应回来的数据，补充到options变量里
  getKApi()
    .then((res: AxiosResponse) => {
      if (res.data.code === "200") {
        options.xAxis.data = res.data.data.x;
        options.series[0].data = res.data.data.val;
        // 设置配置项
        myChart.setOption(options);
      }
    })
}

</script>

<style scoped>
.content-box {
  width: 100%;
  height: 800px;
  display: flex;
}

#main-01,
#main-02 {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

#main-03 {
  width: 600px;
  height: 400px;
  border: 1px solid black;
}
</style>